<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./lib/css/reset.css" />
  <link rel="stylesheet" href="./less/css/craftsmanInfoInput.css" />
  <link rel="stylesheet" href="./font/iconfont.css" />
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <!-- <link rel="stylesheet" href="./less/css/right-uploadPicAndID.css"> -->
</head>

<body>
  <div class="main">
    <div class="main-left">
      <div class="personalDetails">
        <div class="avatar">
          <i class="iconfont">&#xe61a;</i>
        </div>
        <div class="username">
          张三
        </div>
      </div>
      <div class="tabs">
        <div class="tabs-item active">
          <i class="iconfont">&#xe619;</i>
          <span>基本信息</span>
        </div>
        <div class="tabs-item">
          <i class="iconfont">&#xe64a;</i>
          <span>上传头像和身份证</span>
        </div>
        <div class="tabs-item lastBorder">
          <i class="iconfont">&#xe64a;</i>
          <span>上传作品</span>
        </div>
      </div>
    </div>
    <div class="main-right">
      <div class="steps">
        <div class="wrapperBox">
          <div class="wrapper-first stepActive ">
            <div class="setps-icon">
              <i class="iconfont">&#xe65a;</i>
            </div>
          </div>
          <div class="basicInfo">
            基本信息
          </div>
        </div>
        <div class="wrapper-other">
          <div class="setps-line"></div>
          <div class="wrapperBox">
            <div class="wrapper-first">
              <div class="setps-icon">
                <i class="iconfont">&#xe625;</i>
              </div>
            </div>
            <div class="basicInfo">
              上传头像和身份证
            </div>
          </div>
        </div>
        <div class="wrapper-other">
          <div class="setps-line"></div>
          <div class="wrapperBox">
            <div class="wrapper-first">
              <div class="setps-icon">
                <i class="iconfont">&#xe625;</i>
              </div>
            </div>
            <div class="basicInfo">
              上传作品
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="right-basicInfo">
          <div class="basicInfo-title">
            基本信息
          </div>
          <div class="product-main">
            <div class="form-item">
              <div class="left">
                <label for="usernameIpt">姓名</label>
              </div>
              <div class="right username">
                <input type="text" placeholder="请输入你的真实姓名" id="usernameIpt" />
              </div>
            </div>
            <div class="form-item">
              <div class="left">
                <label for="usernameIpt">性别</label>
              </div>
              <div class="right sex">
                <div class="circleBox activeCircle">
                  <span class="circle"></span>
                </div>
                <span class="word">男</span>
              </div>
              <div class="right sex">
                <div class="circleBox">
                  <span class="circle"></span>
                </div>
                <span class="word">女</span>
              </div>
            </div>
            <div class="form-item">
              <div class="left">
                <label for="telIpt">手机号</label>
              </div>
              <div class="right tel">
                <input type="text" placeholder="请输入手机号" id="telIpt" />
              </div>
            </div>
            <div class="form-item">
              <div class="left">
                <label for="identityCardIpt">身份证号</label>
              </div>
              <div class="right  identityCard">
                <input type="text" placeholder="请输入您的身份证号码" id="identityCardIpt" />
              </div>
            </div>
            <div class="form-item">
              <div class="left">
                <label for="censusAddrIpt">户籍地址</label>
              </div>
              <div class="right censusAddr">
                <div class="select">
                  <div class="province">
                    <input type="text" placeholder="浙江省">
                    <i class="iconfont">&#xe600;</i>
                  </div>
                  <div class="citys">
                    <input type="text" placeholder="杭州市">
                    <i class="iconfont">&#xe600;</i>
                  </div>
                  <div class="county">
                    <input type="text" placeholder="江干区">
                    <i class="iconfont">&#xe600;</i>
                  </div>
                  <div class="streets">
                    <input type="text" placeholder="新塘路">
                    <i class="iconfont">&#xe600;</i>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-item">
              <div class="left">
                <label for="permanentAddrIpt">常住地址</label>
              </div>
              <div class="right permanentAddr">
                <div class="select">
                  <div class="province">
                    <input type="text" placeholder="浙江省">
                    <i class="iconfont">&#xe600;</i>
                  </div>
                  <div class="citys">
                    <input type="text" placeholder="杭州市">
                    <i class="iconfont">&#xe600;</i>
                  </div>
                  <div class="county">
                    <input type="text" placeholder="江干区">
                    <i class="iconfont">&#xe600;</i>
                  </div>
                  <div class="streets">
                    <input type="text" placeholder="新塘路">
                    <i class="iconfont">&#xe600;</i>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-item">
              <div class="left">
                <label for="detailedAddrIpt">详细地址</label>
              </div>
              <div class="right detailedAddr">
                <input type="text" placeholder="请输入您的详细地址详，如村（社）、门牌号等" id="detailedAddrIpt" />
              </div>
            </div>
            <div class="form-item">
              <div class="left">
                <label for="educationIpt">学历</label>
              </div>
              <div class="right education">
                <input type="text" placeholder="请选择" id="educationIpt" />
                <i class="iconfont">&#xe600;</i>
              </div>
            </div>
            <div class="form-item">
              <div class="left">
                <label for="skillsIpt">技能</label>
              </div>
              <div class="right skills">
                <input type="text" placeholder="请输入您的技能" id="skillsIpt" />
              </div>
            </div>
            <div class="form-item">
              <div class="left">
                <label for="craftsmanDescIpt">工匠描述</label>
              </div>
              <div class="right craftsmanDesc">
                <input type="text" placeholder="从业多年/擅长盖什么房子/自身优点" id="craftsmanDescIpt" />
              </div>
            </div>
          </div>
          <div class="saveBox">
            <button>保存</button>
          </div>
        </div>
        <div class="right-uploadPicAndID">
          <div class="uploadPicAndID-title">
            头像和身份证
          </div>
          <div class="uploadPicAndID-main">
              <div class="imgWrapper">
                  <div class="wrapper">
                    <div class="img">
                        <i class="iconfont">&#xe61a;</i>
                    </div>
                    <div class="desc">（上传一寸半身照）</div>
                  </div>
                  <div class="wrapper">
                    <div class="img">
                        <i class="iconfont">&#xe61a;</i>
                    </div>
                    <div class="desc">（上传一寸半身照）</div>
                  </div>
                  <div class="wrapper">
                    <div class="img">
                        <i class="iconfont">&#xe61a;</i>
                    </div>
                    <div class="desc">（上传一寸半身照）</div>
                  </div>
              </div>
          </div>
          <div class="saveBox">
              <button>保存</button>
            </div>
        </div>
        <div class="upload-product productionBox">
          <div class="production-item">
            <div class="title">作 品 1</div>
            <div class="content">
              <div class="imgBox">
                <div class="img-item" onclick="selectPic(this)">
                  <i class="iconfont">&#xe636;</i>
                  <img class="img" src="" alt="" />
                </div>
                <div class="img-item" onclick="selectPic(this)">
                  <i class="iconfont">&#xe636;</i>
                  <img class="img" src="" alt="" />
                </div>
                <div class="img-item" onclick="selectPic(this)">
                  <i class="iconfont">&#xe636;</i>
                  <img class="img" src="" alt="" />
                </div>
              </div>
              <div class="householderInfo">
                <div class="householderInfo-item">
                  <span class="householderArea">
                    <label>简 介</label>
                  </span>
                  <input
                    data-id="Summary"
                    type="text"
                    placeholder="占地面积/造价"
                  />
                </div>
                <div class="householderInfo-item">
                  <span class="householderName">
                    <label>户主姓名</label>
                  </span>
                  <input
                    data-id="HuZhuName"
                    type="text"
                    placeholder="请输入户主姓名"
                  />
                </div>
                <div class="householderInfo-item">
                  <span class="householderAddr">
                    <label>户主地址</label>
                  </span>
                  <input
                    data-id="HuZhuAddress"
                    type="text"
                    placeholder="请输入户主地址"
                  />
                </div>
                <div class="householderInfo-item">
                  <span class="householderTel">
                    <label>户主电话</label>
                  </span>
                  <input
                    data-id="HuZhuTel"
                    type="text"
                    placeholder="请输入户主电话号码"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="production-item">
            <div class="title">作 品 2</div>
            <div class="content">
              <div class="imgBox">
                <div class="img-item" onclick="selectPic(this)">
                  <i class="iconfont">&#xe636;</i>
                  <img class="img" src="" alt="" />
                </div>
                <div class="img-item" onclick="selectPic(this)">
                  <i class="iconfont">&#xe636;</i>
                  <img class="img" src="" alt="" />
                </div>
                <div class="img-item" onclick="selectPic(this)">
                  <i class="iconfont">&#xe636;</i>
                  <img class="img" src="" alt="" />
                </div>
              </div>
              <div class="householderInfo">
                <div class="householderInfo-item">
                  <span class="householderArea">
                    <label>简 介</label>
                  </span>
                  <input
                    data-id="Summary"
                    type="text"
                    placeholder="占地面积/造价"
                  />
                </div>
                <div class="householderInfo-item">
                  <span class="householderName">
                    <label>户主姓名</label>
                  </span>
                  <input
                    data-id="HuZhuName"
                    type="text"
                    placeholder="请输入户主姓名"
                  />
                </div>
                <div class="householderInfo-item">
                  <span class="householderAddr">
                    <label>户主地址</label>
                  </span>
                  <input
                    data-id="HuZhuAddress"
                    type="text"
                    placeholder="请输入户主地址"
                  />
                </div>
                <div class="householderInfo-item">
                  <span class="householderTel">
                    <label>户主电话</label>
                  </span>
                  <input
                    data-id="HuZhuTel"
                    type="text"
                    placeholder="请输入户主电话号码"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="production-item">
            <div class="title">作 品 3</div>
            <div class="content">
              <div class="imgBox">
                <div class="img-item" onclick="selectPic(this)">
                  <i class="iconfont">&#xe636;</i>
                  <img class="img" src="" alt="" />
                </div>
                <div class="img-item" onclick="selectPic(this)">
                  <i class="iconfont">&#xe636;</i>
                  <img class="img" src="" alt="" />
                </div>
                <div class="img-item" onclick="selectPic(this)">
                  <i class="iconfont">&#xe636;</i>
                  <img class="img" src="" alt="" />
                </div>
              </div>
              <div class="householderInfo">
                <div class="householderInfo-item">
                  <span class="householderArea">
                    <label>简 介</label>
                  </span>
                  <input
                    data-id="Summary"
                    type="text"
                    placeholder="占地面积/造价"
                  />
                </div>
                <div class="householderInfo-item">
                  <span class="householderName">
                    <label>户主姓名</label>
                  </span>
                  <input
                    data-id="HuZhuName"
                    type="text"
                    placeholder="请输入户主姓名"
                  />
                </div>
                <div class="householderInfo-item">
                  <span class="householderAddr">
                    <label>户主地址</label>
                  </span>
                  <input
                    data-id="HuZhuAddress"
                    type="text"
                    placeholder="请输入户主地址"
                  />
                </div>
                <div class="householderInfo-item">
                  <span class="householderTel">
                    <label>户主电话</label>
                  </span>
                  <input
                    data-id="HuZhuTel"
                    type="text"
                    placeholder="请输入户主电话号码"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="saveBox">
            <button class="save" onclick="Work_Click()">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./lib/js/jquery-1.12.4.min.js"></script>
  <script src="./js/craftsmanInfoInput.js"></script>
</body>

</html>